<!--
 * @Author: 陈迪秀 1170776994@qq.com
 * @Date: 2024-02-25 10:16:12
 * @LastEditors: yuanjunyi
 * @LastEditTime: 2024-03-04 08:47:17
 * @FilePath: \stell-mall\src\components\footer\function-introduction.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="function-introduction">
    <div
      class="function-introduction__view"
      v-for="item in functionIntroduction"
    >
      <h4>{{ item.title }}</h4>
      <p
        :class="elem.link ? 'link-active' : ''"
        @click="toRouter(elem.link)"
        v-for="elem in item.list"
      >
        {{ elem.name }}
      </p>
    </div>
  </div>
</template>
<script setup lang="ts">
import { functionIntroduction } from "./constants";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const toRouter = (name: string) => {
  if (name) router.push(name);
};
</script>
<style lang="scss" scoped>
.function-introduction {
  flex: 1;
  display: flex;
  justify-content: space-between;
  .function-introduction__view {
    h4 {
      font-size: 16px;
      margin-bottom: 24px;
    }
    p {
      font-size: 14px;
      color: #c4c4c4;
      margin-bottom: 18px;
    }
    .link-active {
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
